<template>
    <div>
        <div class="swipe-wrapper" v-if="banner">
            <van-swipe :autoplay="3000" @change="onChange">
                <van-swipe-item class="item" v-for="(item, index) in banner" :key="index">
                    <img :src="item"/>
                </van-swipe-item>
                <div class="custom-indicator" slot="indicator">
                    {{ current + 1 }}/{{banner.length}}
                </div>
            </van-swipe>
        </div>
        <div class="share" v-if="isLogin" @click="toShare()">
            <svg class="icon zf" aria-hidden="true">
                <use xlink:href="#icon-user-fx"></use>
            </svg>
            <span class="share_desc">一键分享</span>
        </div>
    </div>
</template>

<script>

    import API from '../../request/api';

    export default {
        name: 'banner-detail',
        props: {
            banner: {
                type: Array
            }
        },
        data() {
            return {
                url: '',
                current: 0,
                isLogin: false
            };
        },
        computed: {},
        methods: {
            onChange(index) {
                this.current = index;
            },
            toShare() {
                this.$emit('toShare');
            }
        },
        mounted() {
            this.request.get(API.islogin).then(res => {
                if (res.islogin == 1) {
                    // eslint-disable-next-line vue/no-async-in-computed-properties
                    this.request.get(API.getUserInfo).then(res1 => {
                        if (parseInt(res1.isbuy) > 0) {
                            this.isLogin = true;
                        }
                    });
                }
            });

            console.log('banner-detail:', this.banner);
        }
    };
</script>

<style lang="stylus" rel="stylesheet/stylus" scoped>
    @import "~@/assets/main.styl"
    .van-swipe-item {
        float left
        height auto
    }

    .share {
        position absolute
        /*z-index 99*/
        right 0 /
        top vw(66)
        background-color main-color
        width vw(90)
        height vw(30)
        line-height vw(30)
        border-bottom-left-radius all-radius
        border-top-left-radius all-radius
        display flex
        justify-content center
        text-align center
        align-items center
        word-vw(word14, grayF)

        .zf {
            display flex
            align-items center
            justify-content center
            height vw(20)
            width vw(20)
            fill grayF
        }
    }

    img[lazy=loading] {
        width 30vw
        margin 8vw auto
    }

    .swipe-wrapper {
        width vw(375)
        height vw(375)
    }

    .item {
        text-align center

        & img {
            width vw(375)
            height vw(375)
        }
    }

    .custom-indicator {
        position absolute
        right vw(20)
        bottom vw(20)
        //opacity 0.28
        line-height vw(17)
        word-vw(word12, grayF)
        background gray9
        width vw(37)
        display flex
        align-items center
        justify-content center
        height vw(20)
        border-radius all-radius

    }
</style>
